body {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    height: 100vh;
    background-color: #FFFACE;
}

body .wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 450px;
}

body .wrap a {
    text-decoration: none;
    color: #222;
    padding: 20px;
    background: #efefef;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    font-family: 'Oswald';
    margin: 20px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    cursor: pointer;
}

body .wrap a:before {
    content: '';
    position: absolute;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: calc(2px/-1);
    left: calc(2px/-1);
    background: -webkit-gradient(linear, left top, right top, from(blue), to(blue)), -webkit-gradient(linear, left bottom, left top, color-stop(50%, blue), color-stop(50%, transparent)), -webkit-gradient(linear, left bottom, left top, color-stop(50%, blue), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, from(blue), to(blue)), -webkit-gradient(linear, right top, left top, from(blue), to(blue));
    background: linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to left, blue 0%, blue 100%);
    background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
    background-repeat: no-repeat, no-repeat;
    -webkit-transition: background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: scaleX(0) rotate(0deg);
    transform: scaleX(0) rotate(0deg);
    -webkit-transition-delay: 0.6s, 0.3s, 0s;
    transition-delay: 0.6s, 0.3s, 0s;
}

body .wrap a:hover:before {
    background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    -webkit-transform: scaleX(1) rotate(0deg);
    transform: scaleX(1) rotate(0deg);
    -webkit-transition-delay: 0s, 0.3s, 0.6s;
    transition-delay: 0s, 0.3s, 0.6s;
}

